<template>
    <div class="follow">
        <div class="title">全部关注</div>
        <el-empty description="暂无关注" v-if="follow.length == 0"></el-empty>
        <div>
            <div v-for="item in follow" :key="item.id" style="height: 100%;">
                <el-divider></el-divider>
                <div class="avatar" @click="jump_blank('friend_person',item.id)">
                    <el-avatar style="width: 60px; height: 60px;" fit="fill">
                        <img :src="item.avatarUrl" referrerPolicy='no-referrer'>
                    </el-avatar>
                </div>
                <div class="name">
                    <div style="margin-bottom: 20px;font-size: 120%;"><span style="cursor: pointer;" @click="jump_blank('friend_person',item.id)">{{ item.name }}</span></div>
                    <div style="font-size: 80%;color:darkgrey" class="intro">{{ item.introduction }}</div>
                </div>

            </div>
            
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    props:["user_information"],
    data(){
        return{
            follow:[],//全部关注数据
        }
    },
    methods:{
        //_blank跳转
        jump_blank(url_name,id){
            var {href} = this.$router.resolve({
                name:url_name,
                query:{
                    id:id
                }
            })
            window.open(href,"_blank");
        },
        //发送消息
        send_message(item){
            var {href} = this.$router.resolve({
                name:'message',
                query:{
                    id:item.id,
                    name:item.name,
                    avatar_url:item.avatar_url,
                    main:[]
                }
            })
            window.open(href,"_blank");
        },
        //空方法
        load(){},
        //取消关注
        delete_follow(fid){
            this.$confirm('您确定要取消关注吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    var uid = _this.user_information.id
                    var follow = {
                        uid:uid,
                        fid:fid
                    }
                    PersonalCenterApi.SubmitDeleteRegard(follow).then(res => {
                        this.$router.go(0)
                    })
                }).catch(() =>{})
        }
    },
    created(){
        var _this = this
        var id = _this.user_information.id
        //获取关注的人
        PersonalCenterApi.SubmitByUserIdGetRegard(1,5,id).then(res => {
            if(res.data.code == 200){
                _this.follow = _this.follow.concat(res.data.data.records)
            }   
        })
    }
};
</script>

<style scoped>
.follow{
    text-align: left;
    padding: 15px;
}
.title{
    color: black;
    font-size: 150%;
}
.avatar{
    display: inline-block;
    cursor: pointer;
}
.name{
    display: inline-block;
    margin-left: 20px;
}
.operate{
    float: right;
    margin-right: 30px;
}
.intro{
    height: 20px;
    width:400px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
</style>